<template>
  <div class="coupon-container">
    <h1 class="title">我的优惠卷</h1>

    <el-button type="primary" @click="showCouponHistory" class="history-button">查看优惠卷历史</el-button>

    <el-card v-for="coupon in coupons" :key="coupon.id" class="coupon-card" v-if="coupons.length!=0">
      <div slot="header" class="coupon-header">
        <span class="coupon-title">{{ coupon.name }}</span>
<!--        <el-button @click="showDetails(coupon)" type="text" size="small">详情</el-button>-->
      </div>
      <div class="coupon-content">
        <div class="coupon-amount">￥{{ coupon.amount }}</div>
        <div class="coupon-info">
          <p>满{{ coupon.minPoint }}可用</p>
          <p>有效期至：{{ formatDate(coupon.endTime) }}</p>
        </div>
        <el-button type="success" @click="useCoupon(coupon)" class="use-button">立即使用</el-button>
      </div>
    </el-card>

    <div v-if="coupons.length == 0">
      <el-empty
          image="https://shyvv-1308916267.cos.ap-chengdu.myqcloud.com/mall/58881654671202045.png"
          :image-size="500"
          description="快去领取优惠卷吧!"/>
    </div>

    <!-- 优惠卷详情对话框 -->
    <el-dialog title="优惠卷详情" :visible.sync="dialogVisible" width="80%" class="dialog">
      <el-descriptions v-if="selectedCoupon" class="coupon-details" :column="1" border>


      </el-descriptions>
    </el-dialog>

    <!-- 优惠卷历史记录对话框 -->
    <el-dialog title="优惠卷历史记录" :visible.sync="historyDialogVisible" width="80%" class="history-dialog">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="已使用" name="used">
          <el-table :data="usedCoupons" border>
            <el-table-column prop="name" label="优惠卷名称"></el-table-column>
            <el-table-column prop="amount" label="优惠金额">
              <template slot-scope="scope">
                ￥{{ scope.row.amount }}
              </template>
            </el-table-column>
            <el-table-column prop="usedDate" label="使用日期"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已过期" name="expired">
          <el-table :data="expiredCoupons" border>
            <el-table-column prop="name" label="优惠卷名称"></el-table-column>
            <el-table-column prop="amount" label="优惠金额">
              <template slot-scope="scope">
                ￥{{ scope.row.amount }}
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="过期日期">
              <template slot-scope="scope">
                {{ formatDate(scope.row.endTime) }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coupons: [],
      dialogVisible: false,
      selectedCoupon: null,
      historyDialogVisible: false,
      activeName: 'used', // 默认选中'已使用'标签页
      usedCoupons: [], // 已使用优惠卷列表
      expiredCoupons: [], // 已过期优惠卷列表
    };
  },
  created() {
    // 模拟获取优惠卷数据
    this.fetchCoupons();
    this.fetchCouponHistory('used')
  },
  methods: {
    fetchCoupons() {
      this.$api.common.getCoupon(0).then(res => {
        if (res.code == 200) {
          this.coupons = res.data;
        }
      });
    },
    fetchCouponHistory(tagName) {
      let status = 1
      if (tagName == 'expired') {
        status = 2
      }
      this.$api.common.getCoupon(status).then(res => {
        if (res.code == 200) {
          if (tagName == 'expired') {
            this.expiredCoupons = res.data
          } else {
            this.usedCoupons = res.data;
          }
        }
      });
    },
    showDetails(coupon) {
      this.selectedCoupon = coupon;
      this.dialogVisible = true;
    },
    useCoupon(coupon) {
      this.$router.push({path: "/allPro", query: {keyword: 'all'}});
    },
    showCouponHistory() {
      this.historyDialogVisible = true;
    },
    handleTabClick(tab) {
      this.fetchCouponHistory(tab.name)
    },
    getCouponType(type) {
      // 同上
    },
    formatDate(dateString) {
      return dateString.split(' ')[0]; // 只显示日期部分
    }
  }
};
</script>

<style scoped>
.coupon-container {
  /*max-width: 800px;*/
  /*margin: 20px auto;*/
  /*padding: 20px;*/
  /*background: #f5f5f5;*/
  /*border-radius: 8px;*/
  padding: 10px;
  max-height: 500px;
  overflow: auto;
}

.title {
  color: #4CAF50;
  text-align: center;
  margin-bottom: 30px;
}

.coupon-card {
  margin-bottom: 20px;
  border-radius: 10px;
  border: 2px solid rgb(138, 182, 96);
  transition: box-shadow 0.3s;
}

.coupon-card:hover {
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.2);
}

.coupon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(138, 182, 96);
  color: white;
  border-radius: 8px 8px 0 0;
  padding: 10px 15px;
}

.coupon-title {
  font-size: 18px;
  font-weight: bold;
}

.coupon-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.coupon-amount {
  font-size: 24px;
  font-weight: bold;
  color: rgb(138, 182, 96);
}

.coupon-info {
  text-align: right;
  color: #606266;
}

.use-button {
  background: rgb(138, 182, 96);
  border-color: rgb(138, 182, 96);
  color: white;
}

.use-button:hover {
  background: #45a049;
  border-color: #45a049;
}

.dialog /deep/ .el-dialog__header {
  background: rgb(138, 182, 96);
  color: white;
}

.dialog /deep/ .el-dialog__title {
  color: white;
}

.dialog /deep/ .el-descriptions-item__label {
  background: #e8f5e9;
  color: rgb(138, 182, 96);
  font-weight: bold;
}

/* 同上 */
.history-button {
  background: rgb(138, 182, 96);
  border-color: rgb(138, 182, 96);
  color: white;
  margin-bottom: 20px;
  text-align: left;
}

.history-dialog /deep/ .el-dialog__header {
  background: rgb(138, 182, 96);
  color: white;
}

.history-dialog /deep/ .el-tabs__header {
  background: #e8f5e9;
}

.history-dialog /deep/ .el-tabs__nav-wrap::after {
  background: none;
}

.history-dialog /deep/ .el-tabs__item {
  color: rgb(138, 182, 96);
}

.history-dialog /deep/ .el-tabs__item.is-active {
  color: white;
  background: rgb(138, 182, 96);
}
</style>
